{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}分析{% endblock %}</h1>
{% endblock %}

{% block user %}
    {% block username%}
        <span style="margin-left: 50px">
            {{ username }}
        </span>
    {% endblock %}
{% endblock %}

{% block content %}
    <div class="container">
        <div id="bar1" style="width:1000px; height:550px; margin-top: 20px"></div>
        <div style="margin-top: 10px" >
            <div>
                {{ grades |safe }}
            </div>
        </div>
        <div id="bar2" style="width:1000px; height:600px; margin-top: 40px"></div>
        <div style="margin-top: 20px">
                <span style="font-size: 20px; font-weight: bold">
                    {{ cpu_name }}
                </span>
                <button type="button" class="btn btn-sm btn-primary" disabled> 数量: {{ cpu_num }} </button>
        </div>
        <div style="overflow-x:scroll; box-shadow: darkgrey 10px 10px 10px 10px; margin-top: 10px" >
            <div>
                {{ content|safe }}
            </div>
        </div>
    </div>
    <script>
        $(
            function () {
                var chart1 = echarts.init(document.getElementById('bar1'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/grade",
                    dataType: 'json',
                    success: function (result) {
                        chart1.setOption(result);
                    }
                });
                var chart2 = echarts.init(document.getElementById('bar2'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/scatter",
                    dataType: 'json',
                    success: function (result) {
                        chart2.setOption(result);
                    }
                });
            }
        )
    </script>
{% endblock %}
